<template>
  <div>
    <el-tabs v-model="tabName" type="card">
      <el-tab-pane label="邀请提成" name="1">
        <div class="container">
          <el-table
            :data="list"
            style="width: 100%;margin-top:5px;"
            :height="tableHeight"
            border
            stripe
          >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column label="头像" width="100" align="center">
              <template slot-scope="scope">
                <img
                  style="width:50px;height:50px;"
                  :src="scope.row.user.avatar"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column label="用户/ID">
              <template slot-scope="scope">
                {{ scope.row.user.nickname }}/{{ scope.row.user.username }}
              </template>
            </el-table-column>
            <el-table-column label="等级">
              <template slot-scope="scope">
                {{ scope.row.user.level_id }}
              </template>
            </el-table-column>
            <el-table-column prop="mobile" label="绑定手机号">
              <template slot-scope="scope"
                >{{ scope.row.user.username }}
              </template>
            </el-table-column>
            <el-table-column label="推荐时间">
              <template slot-scope="scope">
                {{ scope.row.user.created_at }}
              </template>
            </el-table-column>
            <el-table-column label="奖励">
              <template slot-scope="scope"> ￥{{ scope.row.bonus }} </template>
            </el-table-column>
          </el-table>
          <div class="table-bottom-bar">
            <div></div>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="size"
              layout="total, prev, pager, next"
              :total="total"
              :background="true"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单提成" name="2">
        <div class="container">
          <el-table
            :data="list"
            style="width: 100%;margin-top:5px;"
            :height="tableHeight"
            border
            stripe
          >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column
              prop="order_no"
              label="订单号"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column label="用户/ID">
              <template slot-scope="scope">
                {{ scope.row.user.nickname }}/{{ scope.row.user.username }}
              </template>
            </el-table-column>
            <el-table-column label="商品信息">
              <template slot-scope="scope">
                <div style="display:flex;align-items:center;">
                  <img
                    style="width:50px;height:50px;object-fit:cover;"
                    :src="scope.row.img"
                    alt=""
                  />
                  <div>{{ scope.row.name }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="实际付款">
              <template slot-scope="scope">
                ￥{{ scope.row.payment }}
              </template>
            </el-table-column>
            <el-table-column label="提成">
              <template slot-scope="scope"> ￥{{ scope.row.bonus }} </template>
            </el-table-column>
            <el-table-column label="下单时间">
              <template slot-scope="scope">
                {{ scope.row.created_at.date.split(".")[0] }}
              </template>
            </el-table-column>
          </el-table>
          <div class="table-bottom-bar">
            <div></div>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="size"
              layout="total, prev, pager, next"
              :total="total"
              :background="true"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="地区收益" name="3">
        <div class="container">
          <el-table
            :data="list"
            style="width: 100%;margin-top:5px;"
            :height="tableHeight"
            border
            stripe
          >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column
              prop="order_no"
              label="订单号"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column label="用户/ID">
              <template slot-scope="scope">
                {{ scope.row.user.nickname }}/{{ scope.row.user.username }}
              </template>
            </el-table-column>
            <el-table-column label="商品信息">
              <template slot-scope="scope">
                <div style="display:flex;align-items:center;">
                  <img
                    style="width:50px;height:50px;object-fit:cover;"
                    :src="scope.row.img"
                    alt=""
                  />
                  <div>{{ scope.row.name }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="实际付款">
              <template slot-scope="scope">
                ￥{{ scope.row.payment }}
              </template>
            </el-table-column>
            <el-table-column label="提成">
              <template slot-scope="scope"> ￥{{ scope.row.bonus }} </template>
            </el-table-column>
            <el-table-column label="下单时间">
              <template slot-scope="scope">
                {{ scope.row.created_at.date.split(".")[0] }}
              </template>
            </el-table-column>
          </el-table>
          <div class="table-bottom-bar">
            <div></div>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="size"
              layout="total, prev, pager, next"
              :total="total"
              :background="true"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getAgentEarningDetail } from "@/api/agent-mng";
export default {
  name: "EarningDetail",
  data() {
    return {
      tabName: "1",
      list: [],
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      type: "in"
    };
  },
  watch: {
    tabName: function(val) {
      this.searchStr = "";
      this.list = [];
      this.getAgentEarningDetail(1);
    }
  },
  methods: {
    getAgentEarningDetail(page) {
      getAgentEarningDetail({
        page,
        status: this.tabName,
        user_id: this.$route.query.id
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getAgentEarningDetail(page);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 240;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getAgentEarningDetail(1);
    this.changeSize();
  },
  components: {}
};
</script>

<style></style>
